<template>
	<div>home</div>

	<div>{{ storeUser.$state }}</div>
	<div>getters.countGetter: {{ storeUser.countGetter }}</div>
	<hr>
	<button @click="storeChange">直接修改</button>
	<hr>
	<button @click="storePatch">$patch 修改</button>
	<hr>
	<button @click="storeAction">action 修改</button>
	<hr>
	<button @click="resetStore">$reset() 恢复</button>
	<hr>
	<button @click="setLocal">存储到 localstorage</button>
</template>

<script setup lang="ts">
	// 模块化
	import { onMounted, onActivated, getCurrentInstance } from "vue";
	import storeIndex from "@/store/index.js";
	import store_user from "@/store/user.js";
	console.log(storeIndex().aaa.$state, 111111111111)
	onActivated(() => {
		console.log('home activited');
	})

	const storeUser = store_user();
	console.log('storeUser', storeUser);

	storeChange()

	// 直接修改
	function storeChange() {
		storeUser.$state.count += 1
	}

	// $patch 修改
	function storePatch() {
		storeUser.$patch((state : any) => {
			state.count++
		})
	}

	// action 修改
	function storeAction() {
		storeUser.changeCount().then((res : any) => {
			console.log(2222);
		})
	}

	// $reset 恢复
	function resetStore() {
		storeUser.$reset()
	}

	// 订阅，监听调用 action 后的回调 
	// const unsubscribe = storeUser.$onAction(
	//   ({
	//     name, // action 的名字
	//     store, // store 实例
	//     args, // 调用这个 action 的参数
	//     after, // 在这个 action 执行完毕之后，执行这个函数
	//     onError, // 在这个 action 抛出异常的时候，执行这个函数
	//   }: any) => {
	//     console.log('action 订阅', name);

	//     // 如果 action 成功并且完全运行后，after 将触发。
	//     // 它将等待任何返回的 promise
	//     after((result: any) => {
	//       console.log('action 订阅', name, 'after');
	//     })

	//     // 如果 action 抛出或返回 Promise.reject ，onError 将触发
	//     onError((error: any) => {
	//       console.warn(error)
	//     })
	//   }
	// )

	// 手动移除订阅
	// unsubscribe()


	let setLocal = () => {
		console.log(1111);
		let aaa = {
			a: 11111111,
			b: 111,
			c: 111,
			d: 111,
			e: {
				e1: 1111,
				e2: 1111,
			},
		}

		localStorage.setItem('aaa', JSON.stringify(aaa))
	}
</script>

<style lang="scss" scoped>
</style>